import React, { memo, useMemo, useEffect, useState } from "react";
import { Select, Button, DatePicker, Tooltip } from "antd";
import CommonModal from "@/components/CommonModal";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import IconFont from "@/components/IconFont";
import { getChangePriceConfigInfo, submitChangePriceConfig } from "../../../service";
import { ClockCircleOutlined } from "@ant-design/icons";
import { SearchSimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import { getChangePriceConfigLogList, queryOperationList } from "../../../service";
import { isEmpty } from "lodash";
import moment from "moment";

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD HH:mm:ss";

const LogModal = ({ wrapRef }) => {
	const [visible, setVisible] = useState(false);

	const [operationList, setOperationList] = useState([]);

	useEffect(() => {
		getOperationList();
	}, []);

	//操作人列表
	const getOperationList = async username => {
		const { data = [], success } = await queryOperationList({
			username,
			current: 1,
			size: 20
		});
		if (success) {
			setOperationList(data);
		}
	};

	//渲染操作人的显示
	const renderSubUser = item => {
		if (item.account) {
			if (item.name) {
				return item.name + "(" + item.account + ")";
			} else {
				return item.account;
			}
		} else {
			return "";
		}
	};

	//操作人下拉选项
	const optionOperationList =
		!isEmpty(operationList) &&
		operationList.map(item => (
			<Option key={item.account} value={item.id}>
				<Tooltip title={renderSubUser(item)}>{renderSubUser(item)}</Tooltip>
			</Option>
		));

	const tableKey = "ChangePriceConfig_Log";
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		form,
		query,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey: "id",
		columns: [
			{
				name: "操作内容",
				code: "operContent",
				width: 300
			},
			{
				name: "操作类型",
				code: "operType",
				width: 150,
				render(text) {
					return <div>{text === "update_price_set" ? "改价审核设置" : "拿货员改价"}</div>;
				},
				search: {
					order: 2,
					code: "operType",
					content: () => (
						<Select
							placeholder="操作类型"
							options={[
								{ label: "拿货员改价", value: "delivery_clerk" },
								{ label: "改价审核设置", value: "update_price_set" }
							]}
							dropdownStyle={{ zIndex: 99999 }}
						/>
					)
				}
			},
			{
				name: "操作人",
				code: "operatorName",
				search: {
					order: 1,
					code: "operatorId",
					content: () => (
						<Select dropdownStyle={{ zIndex: 99999 }} placeholder="操作人">
							{optionOperationList}
						</Select>
					)
				}
			},
			{
				name: "操作时间",
				code: "operTime",
				render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
				search: {
					order: 3,
					code: "operTime",
					span: 6,
					keys: ["startTime", "endTime"],
					content: () => <RangePicker popupStyle={{ zIndex: 99999 }} format={dateFormat} showTime className="left-no-radius" />
				}
			}
		],
		tableRequest: getChangePriceConfigLogList,
		autoFetch: false,
		hasPagination: true,
		hasQuickSearch: false,
		beforeQuerySearch: false,
		resetSourceData: false,
		hasColsSetting: false,
		hasToggleSearchForm: false,
		columnResize: true
		// hasQueryLocation: "/views/goods/shop"
	});

	return (
		<div>
			<ClockCircleOutlined
				onClick={() => {
					fetchList();
					setVisible(true);
				}}
				style={{
					position: "absolute",
					right: 26,
					top: 6,
					width: "20px",
					height: "20px",
					color: "#0068FF",
					zIndex: 99,
					cursor: "pointer"
				}}
			/>

			<CommonModal
				getContainer={() => wrapRef.current}
				zIndex={9999}
				width={1132}
				title="改价设置修改日志"
				visible={visible}
				onCancel={() => setVisible(false)}
				footer={null}
				bodyStyle={{ paddingBottom: 20 }}
			>
				<SearchSimpleTable key={tableKey} {...searchSimpleTableProps}></SearchSimpleTable>
			</CommonModal>
		</div>
	);
};

export default LogModal;
